<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="static/easyui/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="static/easyui/themes/icon.css">
<link rel="stylesheet" href="static/css/style.css" />
<script src="static/jquery/jquery-1.12.4.js"></script>
<script src="static/easyui/jquery.easyui.min.js"></script>
<script src="static/easyui/locale/easyui-lang-zh_CN.js"></script>
<title>权限管理</title>
<style type="text/css">
#role_tb {
	background: #fff;
	border: 0;
}

.tree-node+ul {
	white-space: normal;
}

.tree-node+ul>li {
	display: inline-block;
}
</style>
</head>
<body>
	<div class="content-container" data-options="region:'center'" style="float: left; width: 50%;">
		<div class="panel-header">
			<div class="panel-title">权限管理</div>
		</div>
		<table id="role_table" class="easyui-datagrid" style="height: 100%">
		</table>
	</div>
	<div id="role_tb">
		<div class="search-container" style="padding: 10px;">
			<a href="javascript:void(0)" class="d-btn btn-blue" onclick="newRole()">添加</a>
			<a href="javascript:void(0)" class="d-btn btn-green" onclick="updateRole()">更新</a>
			<a href="javascript:void(0)" class="d-btn btn-red" onclick="deleteRole()">删除</a>
		</div>
	</div>
	<div id="roleDlg" class="easyui-dialog info_dialog" style="width: 300px; padding: 10px 20px" closed="true"
		buttons="#role-dlg-buttons">
		<div class="title"></div>
		<form id="roleFm" method="post">
			<div class="content_container">
				<table class="content_table">
					<tr>
						<td style="width: 100px;">名称：</td>
						<td>
							<input type="text" class="easyui-textbox" id="name" name="name" required="true" style="width: 100%;" />
						</td>
					</tr>
				</table>
			</div>
		</form>
	</div>
	<div id="role-dlg-buttons">
		<a href="# " class="easyui-linkbutton " onclick="saveRole()">保存</a>
		<a href="# " class="easyui-linkbutton btn-cancel " onclick="javascript:$('#roleDlg').dialog('close')">取消</a>
	</div>
	<div data-options="region:'center'"
		style="float: left; width: 50%; height: 100%; overflow: hidden; border-left: 1px solid #eee;">
		<ul id="per_tree" class="easyui-tree" style="height: 100%; overflow-y: auto;"></ul>
	</div>
</body>

<script>
	var currentRole;
	$(document).ready(function() {
		$('#role_table').datagrid({
			rownumbers : true,
			singleSelect : true,
			pagination : true,
			fitColumns : false,
			pageSize : 30,
			border : false,
			striped : true,
			scrollbarSize : 0,
			toolbar : '#role_tb',
			url : 'levels.do',
			method : 'get',
			onSelect : function(index,row) {
				refreshPerCheck();
			},
			columns : [ [ {
				field : 'name',
				title : '角色名',
				width : '50%'
			} ] ]
		});
		$("#per_tree").tree({
			url : 'projects.do',
			method : "get",
			cascadeCheck : false,
			animate : true,
			checkbox : true,
			lines : false,
			onLoadSuccess : function() {
				$("#per_tree span[class^='tree-icon']").remove();
			},
			onSelect : function(node) {
				if (!node.checked){
					$('#per_tree').tree('check', node.target);
				}else{
					$('#per_tree').tree('uncheck', node.target);
				}
			},
			onCheck : function(n,check) {
				var roleData = $("#role_table").datagrid('getSelected');
				if (roleData == null){
					$.messager.show({
						title : '更新',
						msg : '请选择要更新的角色',
						timeout : 5000,
						showType : 'slide'
					});
					return;
				}
			}
		});
	});
	function refreshPerCheck() {
		$("#per_tree").tree({
			url : 'projects.do',
			method : "get",
			cascadeCheck : false,
			animate : true,
			checkbox : true,
			lines : false,
			onSelect : function(node) {
				if (!node.checked){
					$('#per_tree').tree('check', node.target);
				}else{
					$('#per_tree').tree('uncheck', node.target);
				}
			},
			onLoadSuccess : function() {
				$("#per_tree span[class^='tree-icon']").remove();
				var roleData = $("#role_table").datagrid('getSelected');
				var roots = $("#per_tree").tree('getRoots');
				if (roleData){
					for(var i = 0;i < roleData.projects.length;i++){
						for(var j = 0;j < roots.length;j++){
							if (hasRepeat(roleData.projects, roots[j].attributes) == true){
								$("#per_tree").tree('check', roots[j].target);
							}
							var children = $("#per_tree").tree('getChildren', roots[j].target);
							for(var k = 0;k < children.length;k++){
								if (hasRepeat(roleData.projects, children[k].attributes) == true)
									$("#per_tree").tree('check', children[k].target);
							}
						}
					}
				}
			},
			onCheck : function(n,check) {
				var roleData = $("#role_table").datagrid('getSelected');
				if (roleData == null){
					$.messager.show({
						title : '更新',
						msg : '请选择要更新的角色',
						timeout : 5000,
						showType : 'slide'
					});
					return;
				}
				if (check){
					if (hasRepeat(roleData.projects, n.attributes) == false){
						updatePermission(n.attributes[0], check);
					}
					var p = $('#per_tree').tree('getParent', n.target);
					if (p){
						if (hasRepeat(roleData.projects, p.attributes) == false){
						}
						$('#per_tree').tree('check', p.target);
					}
				}else{
					if (hasRepeat(roleData.projects, n.attributes) == true){
						updatePermission(n.attributes[0], check);
					}
					var c = $('#per_tree').tree('getChildren', n.target);
					if (c){
						for(var i = 0;i < c.length;i++){
							$('#per_tree').tree('uncheck', c[i].target);
						}
					}
				}
			}
		});
	}
	function refreshRoleTable() {
		$("#role_table").datagrid('load', {
			random : Math.random()
		});
	}
	function newRole() {
		$("#roleDlg").dialog('open').dialog('setTitle', '添加角色');
		$("#roleFm").form('clear');
		currentRole = {};
	}
	function updateRole() {
		currentRole = $("#role_table").datagrid('getSelected');
		if (currentRole){
			$("#roleDlg").dialog('open').dialog('setTitle', '更新角色');
			$("#roleFm").form('load', currentRole);
		}else{
			$.messager.alert('更新', '请选择要更新的角色', 'warning');
		}
	}
	function saveRole() {
		if (!$("#roleFm").form('validate'))
			return;
		var name = $("#name").textbox('getValue');
		currentRole.name = name;
		$.ajax({
			type : 'POST',
			url : 'levelSave.do',
			data : JSON.stringify(currentRole),
			contentType : "application/json",
			success : function(data) {
				if (data.success){
					$.messager.show({
						title : '保存角色',
						msg : '保存角色成功',
						timeout : 5000,
						showType : 'slide'
					});
					refreshRoleTable();
				}else{
					$.messager.alert('保存角色', '保存角色失败', 'error');
				}
				$('#roleDlg').dialog('close');
			},
			dataType : "json"
		});
	}
	function deleteRole() {
		var row = $("#role_table").datagrid('getSelected');
		if (row){
			$.messager.confirm('注意', '删除该角色将会导致所有属于该角色的人员失去权限，是否这样做?', function(r) {
				if (r){
					$.ajax({
						type : 'DELETE',
						url : 'levelDelete.do?levelId=' + row.id,
						success : function(data) {
							if (data.success){
								$.messager.show({
									title : '删除角色',
									msg : '删除角色成功',
									timeout : 5000,
									showType : 'slide'
								});
								refreshRoleTable();
							}else{
								$.messager.alert('删除记录', '删除记录失败', 'error');
							}
						},
						dataType : "json"
					});
				}
			});
		}else{
			$.messager.alert('删除', '请选择要删除的角色', 'warning');
		}
	}
	function updatePermission(row,check) {
		var currentRole = $("#role_table").datagrid('getSelected');
		if (currentRole){
			setPermission(currentRole, row, check);
		}else{
			$.messager.alert('设置权限', '请选择要设置权限的角色', 'warning');
			$("#per_table").datagrid('uncheckAll');
		}
	}
	function setPermission(role,per,check) {
		var role = $("#role_table").datagrid('getSelected');
		var data = {
			levelId : role.id,
			perId : per.id,
			check : check
		};
		$.ajax({
			type : 'PUT',
			url : 'authority/level.do',
			data : JSON.stringify(data),
			contentType : "application/json",
			success : function(data) {
				if (check){
					role.projects.push(per);
				}else{
					removeMenu(role.projects, per);
				}
				if (data.success){
					$.messager.show({
						title : '设置权限',
						msg : '设置权限成功',
						timeout : 5000,
						showType : 'slide'
					});
				}
			},
			dataType : "json"
		});
	}
	function getChecked() {
		var nodes = $('#per_tree').tree('getChecked');
		var s = '';
		for(var i = 0;i < nodes.length;i++){
			if (s != '')
				s += ',';
			s += nodes[i].text;
		}
		alert(s);
	}
	function hasRepeat(arr1,arr2) {
		for(var i = 0;i < arr1.length;i++){
			for(var j = 0;j < arr2.length;j++){
				if (arr1[i].id == arr2[j].id){
					return true;
				}
			}
		}
		return false;
	}
	function removeMenu(arr,obj) {
		for(var i = 0;i < arr.length;i++){
			if (arr[i].id == obj.id){
				arr.splice(i, 1);
				return;
			}
		}
	}
</script>
</html>